<template>
    <view class="lrl-footer-wrapper" ref="targetRef" :style="[boxStyles]" v-bind="$attrs">
        <view>
            <slot></slot>
        </view>
        <up-safe-bottom></up-safe-bottom>
    </view>
    <view class="lrl-footer-wrapper-placeholder" :style="[ navbarPlaceholderStyles ]" v-if="props.showPlaceholder"></view>
</template>

<script setup>
    import { onMounted, ref, getCurrentInstance, nextTick } from 'vue'

    /**
     * lrl-footer-wrapper 统一风格悬浮页脚
     * @description LrlFooterWrapper  统一风格悬浮页脚
     * @author ruilin
     * @property {Boolean}           showPlaceholder                是否高度占位，默认true
     * @property {String}            bgColor                        背景颜色，默认#FFFFFF
     * @property {String, Number}    zIndex                         定位层级，默认90
     * @example <lrl-footer-wrapper></lrl-footer-wrapper>
     */
    const props = defineProps({
        showPlaceholder: {
            type: Boolean,
            default: true
        },
        zIndex: {
            type: [String, Number],
            default: 10
        },
        bgColor: {
            type: String,
            default: '#FFFFFF'
        }
    })
    
    const emit  = defineEmits(['placeholderHeight'])
    
    const boxStyles = ref({
        zIndex: props.zIndex,
        background: props.bgColor
    })
    
    const navbarPlaceholderStyles = ref({})
    // 获取组件实例
    const instance = getCurrentInstance()
    
    const targetRef = ref(null)
    
    onMounted(async () => {
		initPlaceholderHeight()
    })
    
    /**
     * 查询占位高度
     */
    const initPlaceholderHeight = async () => {
        let  height  = await getElementHeight()
        height = Math.ceil(height)
        const placeholderHeight = height || uni.upx2px(90)
        navbarPlaceholderStyles.value = {
            height: placeholderHeight + 'px'
        }
        emit('placeholderHeight', placeholderHeight)
    }
    
    /**
     * 查询dom尺寸信息
     * @param {Object} selector
     */
    const getElementHeight = (refName) => {
        return new Promise(async (resolve) => {
             await nextTick()
            // #ifdef APP-NVUE
            const dom = weex.requireModule('dom')
            dom.getComponentRect(instance.refs.targetRef, (res) => {
              if (res?.result) {
                resolve(res.size.height)
              }
            })
            
            // #endif
            // #ifndef APP-NVUE
                const query = uni.createSelectorQuery().in(instance.proxy)
                    query.select('.lrl-footer-wrapper').boundingClientRect(res => {
                      if (res) resolve(res.height)
                    }).exec()
            // #endif
            
        })
    }
    // 抛出接口，给父组件异步刷新占位高度
    defineExpose({ initPlaceholderHeight })
    
</script>

<style scoped lang="scss">
    .lrl-footer-wrapper{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);
        padding: 13rpx 30rpx 23rpx 30rpx;
    }
</style>